<template>
	<view class="cu-item dialogitem" :class="isMe(message)?'self':''">
		<template v-if="!isMe(message)">
			<view v-if="message.type == 'system'" class="cu-avatar radius bg-white"
				:style="'background-image:url(/static/xitong.png);'"></view>
			<view v-else-if="message.type == 'chat'" class="cu-avatar radius" @tap="handlerAvatar(message)"
				:style="'background-image:url('+ getAvatar(otherId(message)) +');'">
			</view>
			<view v-else-if="message.type == 'group' && message.action == 4" class="cu-avatar radius" @longpress.stop="doAt()" @tap="handlerAvatar(message)"
				:style="'background-image:url('+ siteinfo.baseUrl + getAvatars(message) + otherId(message) +');'">
			</view>
			<view v-else class="cu-avatar radius" @longpress.stop="doAt()" @tap="handlerAvatar(message)"
				:style="'background-image:url('+ getAvatar(otherId(message)) +');'">
			</view>
		</template>
		<view class="nickname text-grey" v-if="!isMe(message)">
			<template v-if="message.type=='group'">
				{{aliasMap[message.extra] || memberAlias[message.extra]  || message.name}}
			</template>
			<template v-else>
				{{aliasMap[message.sender] || message.name}}
			</template>
		</view>
		<!-- <view :class="[(message.type=='normal'?'highmode'+message.highmode:'special-'+message.type),(message.type=='shareinfo'?'special-main':'main')]" :id="'msgitem'+message.id" @longpress.stop="doLongPress" :data-index="msgindex"> -->
		<view :class="['highmode'+ message.format, 'main']" :id="'msgitem'+message.id" @longpress.stop="doLongPress"
			:data-index="msgindex">
			<view class="action text-xl" v-if="message.fail && isMe(message)">
				<!-- <text class="cuIcon-infofill text-orange"></text> -->
				<!-- <u-icon name="error-circle-fill" color="red" size="15"
         ></u-icon> -->
				<text v-if="message.fail == 1" @tap="handleReset(message)"
					class="cuIcon cuIcon-warnfill text-red text-xs" style="font-size: 26rpx;"></text>
			</view>
			<view class="action text-xl"
				v-if="message.loading == 1 && isMe(message) && (message.format != 1 && message.format != 3)">
				<!-- <u-loading-icon color="#F56C6C" size="15">  
        </u-loading-icon> -->
				<text class="cuIcon cuIcon-loading2 text-red text-xs"></text>
			</view>
			<!-- // 焚毁状态 -->
			<view class="action text-xl" v-if="message.age && isMe(message)" style="padding: 0 10px;">
				<text class="cuIcon cuIcon-hotfill text-xs text-red" style="font-size: 16px;"></text>
				<text class="text-green" style="font-size: 14px; padding-left: 5rpx;">{{dTime}}</text>
			</view>
			<!-- 图片 -->
			<view class="content noaf nobf" v-if="message.format == 1">
				<image @click="viewImage(message)" :style="style" mode="widthFix" :src="FilterMessage(message)"
					@load="onImageLoad" @error="onImageError"></image>
				<view class="loading_icon" v-if="message.loading ===1 && isMe(message)">
					<text class="cuIcon cuIcon-loading2 text-red text-xs"></text>
				</view>
				<view class="loading_icon" v-if="!loaded && !isMe(message)">
					<text class="cuIcon cuIcon-loading2 text-red text-xs"></text>
				</view>
				<view class="error_icon" v-if="errored && !isMe(message)">
					<text class="cuIcon cuIcon-picfill text-red"></text>
				</view>
			</view>
			<!-- 视频 -->
			<view class="content chat-video noaf nobf" v-else-if="message.format == 3">
				<!-- #ifdef H5 -->
				<view class="bg-video only-img" @tap="videoshow(getVideoInfo(message),FilterMessage(message) )">
					<j-video :name="getLocalName(message.content, 'video')" :width="styleVideo.width"
						:height="styleVideo.height" :videoOption='videoOption' :url="getVideoInfo(message)"
						:poster="FilterMessage(message)" @onImageLoad="onImageLoad">
					</j-video>
				</view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="bg-video only-img">
					<j-video :name="getLocalName(message.content, 'image')" :width="styleVideo.width"
						:height="styleVideo.height" :videoOption='videoOption' :url="getVideoInfo(message)"
						:poster="FilterMessage(message)" @onImageLoad="onImageLoad">
					</j-video>
				</view>
				<!-- #endif -->
			</view>

			<!-- 文件 -->
			<block v-else-if="message.format=='4'">
				<view class="content chat-transfer  chat-redpacket" @click="downLoadFile(message.content)">
					<view class="flex">
						<view class="flex-sub">
							<u-icon :name="showIconByFileType(getLocalName(message.content,'name'))" size="30"
								color="green"></u-icon>
						</view>
						<view class="flex-fives padding-left-sm">
							<view class="text-lg text-cut file_name">{{getLocalName(message.content,'name')}}</view>
							<view class="file-size"> {{getfileSize(message.content)}}</view>
						</view>
					</view>

				</view>
			</block>

			<!-- 语音 -->
			<div class="audio-detail-msg" v-else-if="message.format==2">
				<!-- <div class="audio-style" :class="{
				'add-animation': isPlay,
				me: $store.getters.user.id == message.extra,
			  }" :style="{ width: handleAudioStyleWidth }" @click="playAudio()"> -->
				<div class="audio-style" :class="{
				'add-animation': isPlay,
				me: isMe(message),
			  }" :style="{ width: handleAudioStyleWidth }" @click="doPlayAudio(message)">
					<div class="small"></div>
					<div class="middle"></div>
					<div class="large"></div>
				</div>
				<div class="duration-seconds">{{ showDurationSeconds }}″</div>
			</div>
			<!-- 名片 -->
			<view class="cardShare bg-white" v-else-if="message.format==14"
				@click="naviTo('member/index', { uid: getLocalName(message.content,'id') })">
				<view class="flex align-center padding u-border-bottom">
					<view class="cu-avatar radius lg"
						:style="'background-image:url('+ baseUrl + siteinfo.avatarConst + getLocalName(message.content,'id') +');'">
					</view>
					<view class="padding-left ">
						{{getLocalName(message.content,'name')}}
					</view>
				</view>
				<view class="padding-xs padding-left text-left">
					个人名片
				</view>
			</view>
			<!-- 公众号名片 -->
			<view class="cardShare bg-white" v-else-if="message.format==18"
				@click="naviTo('officialAccount/about', { id: getLocalName(message.content,'id') })">
				<view class="flex align-center padding u-border-bottom">
					<view class="cu-avatar radius lg bg-white"
						:style="'background-image:url('+ baseUrl + siteinfo.micro + getLocalName(message.content,'id') +');'">
					</view>
					<view class="padding-left ">
						{{getLocalName(message.content,'name')}}
					</view>
				</view>
				<view class="padding-xs padding-left text-left">
					公众号名片
				</view>
			</view>

			<!-- 位置 -->
			<block v-else-if="message.format == 5">
				<view class="content chat-location bg-white radius" @click="doOpenLocation(message.content)">
					<view class="padding-sm">
						<view class="text-cut text-lg text-boldm">{{ getLocalName(message.content, 'name') }}</view>
						<view class="text-sm text-gray margin-top-xs text-cut">
							{{ getLocalName(message.content, 'address') }}</view>
					</view>
					<view class="bg-image map-image" style="width: 390rpx; height: 190rpx;">
						<image :src="FilterMessage(message)" mode="widthFix"></image>
						<!-- <u-icon class="postion_map" width="19" height="25" name="../../static/map/marker_red_sprite.png"></u-icon> -->

					</view>
				</view>
			</block>

			<view class="content noaf nobf nobg" v-else-if="message.format==15">
				<image mode="widthFix" :src="FilterMessage(message)"></image>
			</view>
			<!-- 链接 -->
			<view class="cardShare bg-white shadow" style="width: 100%;"
				:style="isMe(message)?'background-color:'+theme.chatbg:''" v-else-if="message.format=='6'"
				@click="handleUrl(JSON.parse(message.content))">
				<view class="flex align-center padding u-border-bottom">
					<view class="text-left">
						{{JSON.parse(message.content).title}}
					</view>
				</view>
				<view class="padding-xs padding-left text-left">
					{{JSON.parse(message.content).url.split('//')[0] +JSON.parse(message.content).url.split('//')[1].split('/')[0]}}
				</view>
			</view>
			<view class="content shadow" :style="isMe(message)?'background-color:'+theme.chatbg:''" v-else>
				<view class="richtext" @tap.stop="naviTo(message.url)" v-if="message.action < 900">
					<ua-markdown :source="FilterMessage(message)" @itemclick="handleRich"/>
					<!-- <rich-text v-else class="richTxt-message" :nodes="FilterMessage(message)"
						@itemclick="handleRich"></rich-text> -->
				</view>
				<!-- 音视频通话展示 -->
				<view class="flex align-center rtcText" @tap.stop="playRtc(message.content)" v-else>
					<text
						v-if="JSON.parse(message.content).type == 'voice' || JSON.parse(message.content).type == 'voiced' "
						class="cuIcon cuIcon-phone margin-right-xs text-df"></text>
					<text v-else class="cuIcon cuIcon-video margin-right-xs text-df"></text>
					<text v-if="!message.callTime">{{JSON.parse(message.content).text}} </text>
					<text v-else>通话时长<text class="padding-left-xs">{{message.callTime}}</text></text>
				</view>
			</view>


			<!-- 焚毁状态 -->
			<view class="action text-xl" v-if="message.age && !isMe(message)" style="padding: 0 10px;">
				<text class="cuIcon cuIcon-hotfill text-xs text-red" style="font-size: 16px;"></text>
				<text class="text-green" style="font-size: 14px; padding-left: 5rpx;">{{dTime}}</text>
			</view>
		</view>
		<view class="cu-avatar radius" @click="naviTo('member/index',{uid: myId(message)})" v-if="isMe(message)"
			:style="'background-image:url('+ getAvatar(myId(message)) +');'"></view>
		
	</view>
</template>

<script>
	import core from "@/core"
	import uaMarkdown from '@/components/ua2-markdown/ua-markdown.vue'
	import {
		getFile,
		findRobot
	} from '@/data/common'
	import {
		chatType,
		emojToHtml
	} from "@/data/common"
	export default {
		name: 'msglist',
		components:{uaMarkdown},
		computed: {
			otherId(message) {
				return message => {
					const type = chatType(message)
					if (type == 'chat') {
						return message.sender
					}
					if (type == 'group') {
						return message.extra
					}
					if (type == 'official') {
						return message.sender
					}
				}
			},
			myId(message) {
				return message => {
					const type = chatType(message)
					if (type == 'chat') {
						return message.sender
					}
					if (type == 'group') {
						return message.extra
					}
					if (type == 'official') {
						return message.sender
					}
				}
			},
			getAvatars(message) {
				return message => {
					const type = chatType(message);
					if (type == 'chat') {
						return this.siteinfo.avatarConst
					}
					if (type == 'group') {
						if (message.action == '4') return this.siteinfo.robotAcatar
						else return this.siteinfo.avatarConst
					}
					if (type == 'official') {
						return this.siteinfo.micro
					}
				}
			},
			style() {
				if (!this.message.content) return
				const imageObject = JSON.parse(this.message.content)
				if (imageObject.ow < 200 && imageObject.oh < 200) {
					return {
						width: imageObject.ow + 'px',
						height: imageObject.oh + 'px',
					}
				} else if (imageObject.ow > imageObject.oh) {
					return {
						width: '200px',
						height: imageObject.oh * (200 / imageObject.ow) + 'px',
					}
				} else {
					return {
						width: imageObject.ow * (200 / imageObject.oh) + 'px',
						height: '200px',
					}
				}
			},
			styleVideo() {
				if (!this.message.content) return
				const imageObject = JSON.parse(this.message.content)
				if (imageObject.width < 200 && imageObject.height < 200) {
					return {
						width: imageObject.width + 'px',
						height: imageObject.height + 'px',
					}
				} else if (imageObject.width > imageObject.height) {
					return {
						width: '200px',
						height: imageObject.height * (200 / imageObject.width) + 'px',
					}
				} else {
					return {
						width: imageObject.width * (200 / imageObject.height) + 'px',
						height: '200px',
					}
				}
			},
			showDurationSeconds() {
				return JSON.parse(this.message.content).length
			},
			handleAudioStyleWidth() {
				if (this.showDurationSeconds == 1) {
					return '38px'
				} else if (
					this.showDurationSeconds > 1 &&
					this.showDurationSeconds < 20
				) {
					return `${38 + (this.showDurationSeconds / 10) * 36}px`
				} else if (this.showDurationSeconds >= 20) {
					return `${106.39 + (this.showDurationSeconds / 10) * 18.935}px`
				}
			}
		},
		data() {
			return {
				time: null,
				dTime: '',
				loaded: false,
				errored: false,
				chatType: chatType,
				theme: core.style,
				sitename: core.system.name,
				isPlay: false,
				audiostyle: ['unread', 'playing text-' + core.style.actcolor, 'played', 'text-' + core.style.actcolor],
				viewpics: [],
				poster: 0,
				videoOption: {
					state: false,
					key: null
				},
			}
		},
		mounted() {
			this.dTime = this.ageMeTime()
			this.updateAge()
		},
		props: {
			chatimages: {
				type: Array,
				default: function() {
					return [];
				}
			},
			chatevel: {
				type: Boolean,
				default: false
			},
			msgindex: {
				type: Number,
				default: 0
			},
			isManager: {
				type: Boolean,
				default: false
			},
			chatid: {
				type: [String, Number],
				default: 0
			},
			dialogtype: {
				type: String,
				default: 'normal'
			},
			message: {
				type: Object,
				default: function() {
					return {
						addtime: 0,
						at: 0,
						avatar: core.system.defaultimg,
						cancel: 0,
						dateline: 0,
						datetime: '刚刚',
						gid: 0,
						highmode: 0,
						id: 0,
						mediaid: '',
						message: '',
						nickname: '',
						openid: '',
						poster: '@/static/images/poster.jpg',
						special: {
							type: 'normal',
							value: ''
						},
						status: 0,
						touid: 0,
						uid: 0,
						uniacid: 0,
						url: "",
						vid: 0,
						warned: 0,
						yuyintime: 0
					}
				}
			}
		},
		methods: {
			updateAge() {
				clearInterval(this.time)
				this.time = setInterval(() => {
					if (!this.message.age || !this.message.ageBegineTime) return
					this.ageOtherTime(this.time)
				}, 1000)
			},
			onImageError(e) {
				console.log(e)
				this.loaded = true
				this.errored = true
			},
			handlerAvatar(message) {
				const type = chatType(message);
				if (type == 'group' && message.action == '4') return;
				this.naviTo('member/index', {
					uid: this.otherId(message),
					fp: this.chatevel ? 'dialog' : 'favor'
				})
			},
			onImageLoad() {
				this.loaded = true
			},
			videoshow(video, image) {
				//#ifdef H5
				const param = {
					image: image,
					video: video
				}
				this.$emit('playVideo', param);
				//#endif
			},
			naviTo(page, data) {
				return core.navito(page, data);
			},
			async doAt() {
				if (this.message.action == 4) {
					let robot = await findRobot(this.message.extra, this.message.sender) || {}
					this.$emit('atRobot', robot);
				} else if (this.message.action == 3 || this.message.action == 0 || this.message.action >= 900) {
					this.$emit('atuser', this.message);
				}
			},
			doLongPress() {
				if (!this.chatevel) return false;
				let self = this;
				var elemquery;
				// #ifndef MP-ALIPAY
				elemquery = uni
					.createSelectorQuery()
					.in(this)
					.select('#msgitem' + this.message.id);
				// #endif
				// #ifdef MP-ALIPAY
				elemquery = uni.createSelectorQuery().select('#msgitem' + this.message.id);
				// #endif
				elemquery
					.boundingClientRect((data) => {
						// data - 各种参数
						// console.log(self.CustomBar, self.StatusBar)
						let popupbottom = 0
						let extra = ''
						// #ifdef H5
						popupbottom = core.Client.windowHeight - data.top + 15;
						// #endif
						// #ifdef APP-PLUS
						popupbottom = core.Client.windowHeight - data.top - self.StatusBar + 15;
						// #endif
						console.log(data)
						if (data.top <= 90) popupbottom = core.Client.windowHeight - data.bottom - 70, extra = 'popup'
						let poplt = data.width / 2 + data.left - 80;
						poplt = poplt < 0 ? 0 : poplt;
						let popupleft = poplt + 160 > core.Client.screenWidth ? core.Client.screenWidth - 160 : poplt;
						self.$emit('lotap', {
							index: self.msgindex,
							left: popupleft,
							bottom: popupbottom,
							msg: self.message,
							extra: extra
						});
					})
					.exec();
			},
			getfileSize(str) {
				let size = this.getLocalName(str, 'size');
				return this.formatFileSize(size)
			},
			doPlayAudio(item) {
				// console.log('item',item);
				// return;


				let uri = this.getLocalName(item.content, 'file');
				let playUrl = this.baseUrl + '/file/chat-space/' + uri
				const param = {
					id: item.id,
					playUrl: playUrl,
					length: this.getLocalName(item.content, 'length')
				}
				if (this.isPlay) return (this.isPlay = false)
				this.isPlay = true
				// 计时停止播放语音
				this.playAudioTimer = setTimeout(() => {
					this.isPlay = false
				}, parseInt(this.showDurationSeconds * 1000))
				this.$emit('playaudio', param);
			},
			formatFileSize(fileSize) {
				if (fileSize < 1024) {
					return fileSize + 'B';
				} else if (fileSize < (1024 * 1024)) {
					var temp = fileSize / 1024;
					temp = temp.toFixed(2);
					return temp + 'KB';
				} else if (fileSize < (1024 * 1024 * 1024)) {
					var temp = fileSize / (1024 * 1024);
					temp = temp.toFixed(2);
					return temp + 'MB';
				} else {
					var temp = fileSize / (1024 * 1024 * 1024);
					temp = temp.toFixed(2);
					return temp + 'GB';
				}
			},
			viewImage(message) {
				this.$emit('previewImg', message);
				// const content = JSON.parse(message.content)
				// const pic = this.baseUrl + this.siteinfo.chatImage + content.image
				// return uni.previewImage({
				//   current: 0,
				//   urls: [pic]
				// })
			},
			posterReload() {
				if (this.poster > 5) return false;
				let self = this;
				setTimeout(function() {
					self.poster += 1;
				}, 4000);
			},
			// 文件下载
			downLoadFile(file) {
				const files = JSON.parse(file)
				console.log(file);
				this.naviTo('dialog/fileDownload', files);
				return;
			},
			doOpenLocation(content) {
				const msg = JSON.parse(content);
				this.naviTo('map/map-send', {
					type: 'see',
					locationAddress: JSON.stringify(msg)
				});
			},
			doShowRedpacket() {
				if (!this.chatevel) return core.navito('dialog/index', {
					cid: chatid,
					type: dialogtype
				});
				this.$emit('dospecial', {
					type: 'showredpacket',
					index: this.msgindex,
					value: this.message.special.value.id
				});
			},
			transferHTML(html) {
				// #ifdef APP-PLUS
				const reg = /(https?|http):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/g;
				if (html)
					return html.replace(reg, item => {
						return "<a href='" + item + "' class='text-blue' pseudoRef='" + item + "'>" + item +
						'</a>';
					});
				else return '';
				// #endif
				// #ifndef APP-PLUS
				const reg = /(https?|http):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/g;
				if (html)
					return html.replace(reg, item => {
						return "<a href='" + item + "' class='text-blue'  pseudoRef='" + item + "'>" + item +
							'</a>';
					});
				else return '';
				// }
				// #endif
			},
			handleRich({
				detail
			}) {
				// console.log(detail)
				// this.naviTo(detail.node.attrs.href)
				if(detail.node.name != 'a') return
				// #ifdef APP-PLUS
				plus.runtime.openWeb(detail.node.attrs.href);
				// #endif
				// #ifdef H5
				window.open(detail.node.attrs.href)
				// this.naviTo(item.url)
				// #endif
			},
			FilterMessage(message) {
				if (message.format == 0) {
					return this.transferHTML(emojToHtml(message.content, 24))
				} else if (message.format == 15) {
					const content = JSON.parse(message.content)
					// console.log(this.baseUrl + this.siteinfo.emoticon + content.itemId)
					return this.baseUrl + this.siteinfo.emoticon + content.itemId
				} else if (message.format == 1) {
					const content = JSON.parse(message.content)
					// console.log(message.Chatappendixscontent)
					if (this.isMe(message)) {
						return message.Chatappendixscontent || this.baseUrl + this.siteinfo.chatImage + content.thumb
					}
					return this.baseUrl + this.siteinfo.chatImage + content.thumb
				} else if (message.format == 3) {
					const content = JSON.parse(message.content)
					if (this.isMe(message)) {
						return message.Chatappendixscontent || this.baseUrl + this.siteinfo.chatImage + content.image
					}
					return this.baseUrl + this.siteinfo.chatImage + content.image
				} else if (message.format == 5) {
					const content = JSON.parse(message.content)
					return this.baseUrl + this.siteinfo.chatImage + content.image
				}
			},
			getVideoInfo(message) {
				const content = JSON.parse(message.content)
				return this.baseUrl + this.siteinfo.chatImage + content.video
			},

			handleReset(item) {
				this.$emit('handleReset', item);
			},
			playRtc(content) {
				let data = JSON.parse(content)
				console.log(data)
				if (data.type == 'video' || data.type == 'videod') {
					this.$emit('playRtc', {
						type: 'video'
					});
				} else {
					this.$emit('playRtc', {
						type: 'voice'
					});
				}
			},
			handleUrl(item) {
				// #ifdef APP-PLUS
				plus.runtime.openWeb(item.url);
				// #endif
				// #ifdef H5
				window.open(item.url)
				// this.naviTo(item.url)
				// #endif
			},
			ageMeTime() {
				let nowTime = new Date().getTime()
				let age = this.message.ageBegineTime? this.message.age - ((nowTime - this.message.ageBegineTime) / 1000): this.message.age
				if (Math.ceil(age) < 1) {
					return '0s'
				}
				if (age < 60) {
					return Math.ceil(age) + 's'
				} else if (age < 3600) {
					return Math.ceil(age / 60) + 'min+'
				} else if (age < 86400) {
					return Math.ceil(age / 60 / 60) + 'h+'
				} else {
					if (age == 604800) {
						return '1w+'
					} else {
						return Math.ceil(age / 60 / 60 / 24) + 'd+'
					}
			
				}
			},
			ageOtherTime(time) {
				let nowTime = new Date().getTime()			   
				let age = this.message.age - ((nowTime - this.message.ageBegineTime) / 1000)
				if (age > this.message.age) {
					  console.log(nowTime, this.message.ageBegineTime)
					console.log('间隔事件大于焚毁时间', age)
					age = this.message.age
				}
				let dTime = 0
				// console.log(age)
				if (Math.ceil(age) < 1) {
					clearInterval(time)
					time = null
					this.$emit('deletehotMsg',this.message.id, this.msgindex)
					return
				}
				if (age < 60) {
					dTime = Math.ceil(age) + 's'
				} else if (age < 3600) {
					dTime = Math.ceil(age / 60) + 'min+'
				} else if (age < 86400) {
					dTime = Math.ceil(age / 60 / 60) + 'h+'
			
				} else {
					if (age == 604800) {
						dTime = '1w+'
					} else {
						dTime = Math.ceil(age / 60 / 60 / 24) + 'd+'
					}
				}
				this.dTime = dTime
			}
		}
	}
</script>

<style lang="scss">
	.dialogitem>.special-main {
		max-width: calc(100% - 160upx);
		margin: 0 40upx;
		display: flex;
		align-items: center;
		min-width: 450upx;
	}

	.dialogitem .special-content {
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 6upx;
		position: relative;
		overflow: visible;
	}

	.dialogitem.self .special-content::after,
	.cu-chat .self .special-content::before {
		left: auto;
		right: -12upx;
	}

	.dialogitem .nickname {
		position: absolute;
		left: 150upx;
		top: 20upx;
		font-size: 24upx;
	}

	.dialogitem .nickname~.main,
	.cu-chat .cu-item .nickname~.special-main {
		margin-top: 30upx;
	}

	.cu-chat .cu-item>.main.highmode1 {
		max-width: calc(100% - 176rpx) !important;
	}

	.highmode15 .content,
	.highmode2 .content {
		padding: 0 !important;
	}

	.highmode15 .content {
		max-height: 400upx;
		background: none;
		overflow: hidden;
		max-width: 260upx !important;

		image {
			width: 350rpx;
			height: 350rpx;
		}
	}

	.chat-audio {
		line-height: 48upx;
	}

	.chat-audio.unread {
		position: relative;
	}

	.cardShare {
		width: 400rpx;
	}

	.chat-audio.unread::after {
		position: absolute;
		right: -52upx;
		content: '';
		width: 16upx;
		height: 16upx;
		border-radius: 50%;
		background-color: #e54d42;
		top: 50%;
		margin-top: -8upx;
	}

	.chat-audio.played {
		color: #8799A3;
	}

	.chat-audio .cuIcon-sound {
		font-size: 38upx;
		vertical-align: middle;
		margin: 0 10upx;
	}

	.chat-audio .self {
		transform: rotateY(180deg);
		display: inline-block;
	}

	.chat-audio-time::after {
		content: '"';
		display: inline-block;
		padding-left: 4upx;
	}

	.chat-video .bg-video image {
		min-height: 250upx;
		width: 400upx;
	}

	.chat-redpacket.light {
		color: #FFFFFF;
	}

	.chat-location {
		display: block !important;
		overflow: hidden;
		padding: 0 !important;
	}

	.chat-location image {
		width: 100%;
		display: block;
	}

	.dialogitem>.main .content.chat-transfer {
		display: block;
		padding-bottom: 56upx;
		min-width: 380upx;
		overflow: hidden;
	}

	.transfer-bar {
		position: absolute;
		left: 0;
		bottom: 0;
		height: 40upx;
		width: 100%;
		line-height: 40upx;
	}

	.transfer-icon {
		height: 80upx;
		width: 80upx;
		line-height: 80upx;
		text-align: center;
		border: 4upx solid #FFFFFF;
		border-radius: 50%;
	}

	.transfer-icon .cuIcon-order {
		transform: rotate(90deg);
	}

	.special-shareinfo .cu-item {
		padding: 16upx;
		padding-right: 40upx !important;
	}

	.special-shareinfo .cu-item>.cu-avatar {
		left: 20upx;
	}

	.special-shareinfo .cu-item>.content {
		left: 112upx;
		width: calc(100% - 156upx) !important;
	}

	.special-shareinfo .cu-item.arrow::before {
		right: 20upx;
	}

	.dialogitem .content .richtext {
		display: block;
		overflow: hidden;
		max-width: 100%;
	}

	.dialogitem .content .richtext * {
		max-width: 100%;
	}

	.chat-video .only-img {
		min-width: auto;
		max-height: none;
	}

	.rtcText .cuIcon {
		font-size: 36rpx;
	}

	.loading_icon,
	.error_icon {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(255, 255, 255, .5);
	}

	.error_icon {
		background: rgba(229, 77, 66, .2);

		.cuIcon-picfill {
			font-size: 48rpx;
		}

		.cuIcon-picfill::after {
			content: " ";
			width: 4rpx;
			height: 64rpx;
			margin-top: -16px;
			background-color: #e54d42;
			left: 50%;
			top: 50%;
			position: absolute;
			z-index: 100;
			-webkit-transform: rotate(139deg);
			transform: rotate(139deg)
		}
	}

	.map-image {
		position: relative;
	}

	.postion_map {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	// 语音条
	.audio-detail-msg {
		display: flex;
		align-items: center;

		.audio-style {
			display: flex;
			align-items: center;
			height: 32px;
			margin-right: 8px;
			padding: 0 10px;
			border-radius: 4px;
			background: #fff;
			box-shadow: 0 1px 2px rgba(50, 54, 62, 0.2);

			.small {
				border: 4px solid #4c4c4c;
				border-top-color: transparent;
				border-left-color: transparent;
				border-bottom-color: transparent;
			}

			.me {
				background: #00e077;
			}

			.middle {
				width: 16px;
				height: 16px;
				margin-left: -11px;
				opacity: 1;
			}

			.large {
				width: 24px;
				height: 24px;
				margin-left: -19px;
				opacity: 1;
			}

			&>div {
				border: 2px solid #4c4c4c;
				border-top-color: transparent;
				border-left-color: transparent;
				border-bottom-color: transparent;
				border-radius: 50%;
				box-sizing: border-box;
			}

			&.add-animation {
				.middle {
					animation: show2 1.2s ease-in-out infinite;
				}

				.large {
					animation: show3 1.2s ease-in-out infinite;
				}
			}
		}
	}

	// 语音播放动画
	@keyframes show2 {
		0% {
			opacity: 0;
		}

		10% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	.file_name {
		width: 280upx;
		// word-break: break-all;
		// word-wrap: break-word;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	@keyframes show3 {
		0% {
			opacity: 0;
		}

		50% {
			opacity: 1;
		}

		60% {
			opacity: 0;
		}

		100% {
			opacity: 0;
		}
	}
</style>